<template>
  <div>
    <h1>Music</h1>
    <h1>姓名:{{title}}</h1>
    <h1>通过props拿到title和id:{{id}}{{title}}</h1>
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
  </div>
  
</template>

<script>
export default {
  name: "Music",
  props:['id','title'],
  mounted() {
    //动态路由的params传值的动态参数,在$route.params对象上
    // console.log(this.$route.params);
  },
  computed:{
    list(){
      switch(this.$route.params.id){
        case '1' :
          return ['华语1','华语2','华语3'];
        case '2' :
          return ['粤语1','粤语2','粤语3']
        case '3' :
          return ['英语1','英语2','英语3']
        default:
          return []
      }
    },
    // title(){
    //   return this.$route.params.title
    // }
  }
};
</script>

<style>
</style>